<!-- -->
<template>
  <div>
    <div class="box">
      <van-row
        class="row"
        v-for="(item,index) in TitleData.option"
        :key="index"
      >
        <van-col
          span="7"
          class="col"
          v-for="(value, index) in item"
          @click="onConfirm(value.text,name)"
          :class="{'current':currentIndex===value.text}"
          :key="index"
        >{{value.text}}</van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
import { searchGroup } from 'common/js/dom'
export default {
  data () {
    return {
      currentIndex: ''
    }
  },
  methods: {
    onConfirm (value, index) {
      this.$emit('close', value, index)
      this.currentIndex = value
    }
  },
  props: {
    data: Object,
    name: String
  },
  computed: {
    TitleData () {
      return searchGroup(this.data)
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '~common/stylus/variable';
.box {
  width: 85%;
  margin: auto;
  margin-bottom: 10px;
  .row {
    height: $tools-height;
    line-height: $tools-height;
    margin-top: 10px;
    .col {
      border: 5px boild #000;
      background-color: $color-header-theme;
      text-align: center;
      margin-left: 10px;
      &.current {
        background-color: $theme-background-color-rgba;
        color: $theme-background-color;
      }
    }
  }
}
</style>
